<template>
  <div class="container" :style="{ padding: padding }">
    <div class="menu">
      <menu-list
        :menuList="menuList"
        :menuTitle="menuTitle"
        @clickItem="clickItem"
      ></menu-list>
    </div>
    <div class="article_list">
      <article-list
        :crumbsList="crumbsList"
        :articleList="articleList"
        :articleQuery="articleQuery"
        :articleTotal="articleTotal"
        @randomArticle="randomArticle"
      ></article-list>
    </div>
  </div>
</template>

<script>
import {
  getToken,
  getConfigWeb,
  getSort,
  getArticle,
  getColumn,
} from "@/api/index";
import menuList from "@/components/menuList";
import articleList from "@/components/articleList";
export default {
  components: {
    menuList,
    articleList,
  },
  props: {
    padding: {
      default: "0px 15%",
    },
  },
  data() {
    return {
      menuList: [],
      menuTitle: "",
      crumbsList: [
        {
          name: "档案馆",
          path: "/",
        },
      ],
      articleList: [],
      articleQuery: {
        page: 1,
        limit: 10,
      },
      cateId: "",
      articleTotal: 0,
      isColumn: false,
    };
  },
  watch: {
    $route: {
      handler(to, from) {
        console.log("路由发生了变化");
        console.log("从:", from);
        console.log("到:", to);
        // 根据路由变化进行操作
        // 重新加载页面
        location.reload();
      },
      deep: true,
    },
  },
  created() {
    this.menuTitle = this.$route.query.name;
    this.getColumn();
  },
  methods: {
    getColumn() {
      getColumn({
        type: 4,
        pid: this.$route.query.pid,
      }).then(async (res) => {
        if (res.code === 0) {
          console.log(res);
          if (res.data.length > 0) {
            this.isColumn = true;
            this.menuList = res.data;
            this.cateId = res.data[0].id;
            this.getArticle({
              itemId: 4,
              cateId: this.cateId,
              ...this.articleQuery,
            });
          } else {
            this.articleList;
            this.getArticle({
              itemId: 4,
              cateId: this.$route.query.pid,
              ...this.articleQuery,
            });
          }
          // else {
          //   this.isColumn = false;
          //   // 根据栏目id获取文章
          //   this.cateId = data.id;
          //   let articleRes = await getArticle({
          //     itemId: 4,
          //     cateId: this.cateId,
          //     page: 1,
          //     limit: 999,
          //   });
          //   console.log(articleRes);
          //   this.articleList = articleRes.data.records;
          //   this.articleTotal = 1;
          //   this.menuList = articleRes.data.records.map((item) => ({
          //     ...item,
          //     name: item.title,
          //   }));
          // }
          this.crumbsList.push({
            name: this.menuTitle,
            path: window.location.href.split("#")[1],
          });
          if (this.menuList.length > 0) {
            this.crumbsList.push({
              name: this.menuList[0].name,
            });
          }
        }
      });
    },
    getArticle(params) {
      getArticle(params).then((res) => {
        this.articleList = res.data.records;
        this.articleTotal = res.data.total;
      });
    },
    clickItem(item) {
      this.cateId = item.id;
      if (this.isColumn) {
        this.getArticle({
          itemId: 4,
          cateId: this.cateId,
          ...this.articleQuery,
        });
      } else {
        this.articleList = [item];
      }
      this.crumbsList[this.crumbsList.length - 1].name = item.name;
    },
    randomArticle(data) {
      this.articleQuery = data;
      this.getArticle({
        itemId: 4,
        cateId: this.cateId,
        ...this.articleQuery,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  background-color: #f5f9f7;
  min-height: calc(100vh - 512px);
  .menu {
    flex: 4;
    margin: 20px 20px 20px 0;
  }
  .article_list {
    flex: 14;
    margin: 20px 0 20px 20px;
  }
}
</style>